﻿<!--
 * @Description: 本组件共含有三个组件，第一个组件为横向排列的三种情况 SingleRow ，第二个组件 DoubleRow 双排排列 这种情况的排列一共四个 大小一样，第三个组件为双列排布 DoubleCol， 第一列一个，第二列两个
-->
<template>
  <div
    class="magic-cube-module"
    :style="{
      'padding-left': pageData.contentBorder + 'px',
      'padding-right': pageData.contentBorder + 'px'
    }"
  >
    <component
      :is="pageData.layout < 4 ? 'SingleRow' : pageData.layout === 4 ? 'DoubleRow' : 'DoubleCol' "
      :rule-contents="ruleContents"
      :component-id="componentId"
      :activity-code="activityCode"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import SingleRow from './components/SingleRow'
import DoubleRow from './components/DoubleRow'
import DoubleCol from './components/DoubleCol'

export default {
  components: {
    SingleRow,
    DoubleRow,
    DoubleCol
  },
  props: {
    componentId: {
      type: String,
      default: '',
      required: true
    },
    activityCode: {
      type: String,
      default: '',
      required: true
    },
    ruleContents: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  computed: {
    ...mapGetters('main', ['pageContent']),
    pageData () {
      let model = this.pageContent.componentList.find(
        item => item._id === this.componentId
      )
      return { ...model }
    },
    list () {
      // 过滤人群规则，过滤出来
      let tempList = this.pageData.imageList
      if (this.ruleContents && this.ruleContents.length > 0) {
        let hideList = this.ruleContents
          .filter((item) => !item.hit)
          .map((item) => item.elementCode)
        tempList = tempList.filter(
          (item) => !hideList.includes('elecode_' + item._id)
        )
      }
      return tempList
    }
  },
  mounted () {
    this.$sendQdas('8888110801', { item_name: '魔方组件-加载成功' })
  },
  methods: {
    // renderHotArea () {
    //   this.list.forEach(item => {
    //     let getDomId = document.getElementById('img_' + item._id) 
    //     if (getDomId !== null) {
    //       let w = getDomId.offsetWidth
    //       let h = getDomId.offsetHeight
    //       let top = getDomId.offsetTop
    //       let left = getDomId.offsetLeft
    //       item.hotAreaList.forEach(area => {
    //         let element = document.getElementById(
    //           'a' + '_' + item._id + '_' + area._id
    //         )
    //         let text = `width:${area.w * w * 1}px;height:${area.h * h * 1.1}px;top:${top +
    //           area.y * h}px;left:${left + area.x * w}px;`
    //         element.style.cssText = text
    //         console.log('text', text)
    //       })
    //     }
    //   })
    // }
  }
}
</script>

<style lang="less" scoped>
.magic-cube-module {
  .hot-area-block {
    position: absolute;
    display: block;
  }
  img {
    display: block;
  }
}
</style>
